<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="订单编号" prop="orderNum">
        <el-input
          v-model="queryParams.orderNum"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="订单状态" clearable>
          <el-option label="待处理" value="PENDING"></el-option>
          <el-option label="已派单" value="ASSIGNED"></el-option>
          <el-option label="拒接单" value="REJECTED"></el-option>
          <el-option label="待抢单" value="WAITING_FOR_BID"></el-option>
          <el-option label="已抢单" value="BID_ACCEPTED"></el-option>
          <el-option label="已接单" value="ACCEPTED"></el-option>
          <el-option label="服务中" value="IN_SERVICE"></el-option>
          <el-option label="待支付" value="AWAITING_PAYMENT"></el-option>
          <el-option label="已完成" value="COMPLETED"></el-option>
          <el-option label="已评价" value="RATED"></el-option>
          <el-option label="已取消" value="CANCELED"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户手机号" prop="telephone">
        <el-input
            v-model="queryParams.telephone"
            placeholder="请输入用户手机号："
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="用户ID" prop="userId">
        <el-input
            v-model="queryParams.userId"
            placeholder="请输入用户ID"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="师傅ID" prop="workerId">
        <el-input
            v-model="queryParams.workerId"
            placeholder="请输入师傅ID"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="orders" @selection-change="handleSelectionChange">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="订单编号" align="center" prop="orderNum" width="200"/>
      <el-table-column label="服务类型" align="center" prop="serviceCategoryName" />
      <el-table-column label="手机号" align="center" prop="userTelephone" />
      <el-table-column label="订单价格" align="center" prop="orderPrice" />
      <el-table-column label="师傅id" align="center" prop="workerId" />
      <el-table-column label="用户id" align="center" prop="userId" />
      <el-table-column label="预约时间" align="center" prop="reserveTime"/>
      <el-table-column label="订单状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='PENDING'"
                  type="warning" effect="plain" style="background-color: #fff7e6; color: #f56c6c; border-color: #fde3cf;"
          >待处理</el-tag>
          <el-tag v-else-if="scope.row.status==='ASSIGNED'" type="warning">已派单</el-tag>
          <el-tag v-else-if="scope.row.status==='REJECTED'" type="primary">拒接单</el-tag>
          <el-tag v-else-if="scope.row.status==='WAITING_FOR_BID'" type="warning">待抢单</el-tag>
          <el-tag v-else-if="scope.row.status==='BID_ACCEPTED'">已抢单</el-tag>
          <el-tag v-else-if="scope.row.status==='ACCEPTED'">已接单</el-tag>
          <el-tag v-else-if="scope.row.status==='IN_SERVICE'">服务中</el-tag>
          <el-tag v-else-if="scope.row.status==='AWAITING_PAYMENT'" type="danger">待支付</el-tag>
          <el-tag v-else-if="scope.row.status==='COMPLETED'" type="success">已完成</el-tag>
          <el-tag v-else-if="scope.row.status==='RATED'">已评价</el-tag>
          <el-tag v-else-if="scope.row.status==='CANCELED'" type="info">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-hasPermi="['system:post:remove']"
              @click="handleUpdate(scope.row)"
              v-if="scope.row.status==='PENDING' || scope.row.status==='REJECTED' || scope.row.status==='WAITING_FOR_BID'"
          >派单</el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-hasPermi="['system:post:remove']"
              @click="aGrabPool(scope.row)"
              v-if="scope.row.status==='PENDING' || scope.row.status==='REJECTED'"
          >入抢单池</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="details(scope.row,scope.index)"
            v-hasPermi="['monitor:operlog:query']"
          >详细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getOrder"
    />
    <!-- 派单表 -->
    <el-dialog title="派单" :visible.sync="open1" width="800px" append-to-body>
      <el-form ref="form" :model="form1" label-width="80px" size="mini">
        <el-table v-loading="loading" :data="workers" @selection-change="handleSelectionChange">
          <el-table-column label="师傅昵称" align="center" prop="nickname" />
          <el-table-column label="师傅编号" align="center" prop="id" />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-hasPermi="['system:post:remove']"
                  @click="aOrder(scope.row)"
              >派单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false">关 闭</el-button>
      </div>
    </el-dialog>


    <!-- 查看订单详情 -->
    <el-dialog title="订单详细信息" :visible.sync="open" width="800px" append-to-body>
      <h3><b>订单信息: {{ form.serviceCategoryName }}</b></h3>
      <hr/>

      <el-form ref="form" :model="form" label-width="100px" size="mini" v-if="form.status == 'CANCELED'">
        <el-row>
          <el-col :span="14">
            <el-form-item label="用户手机号：">{{ form.userTelephone }} </el-form-item>
            <el-form-item label="用户姓名：">{{ form.userNickName }} </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="预约时间：">{{ form.reserveTime }} </el-form-item>
            <el-form-item label="创建时间：">{{form.createTime}}</el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="备注：">{{ form.notes }} </el-form-item>
            <el-form-item label="上门地址：">{{ form.orderAddress}} </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单编号：">{{ form.orderNum }} </el-form-item>
            <el-form-item label="订单状态：">
              <el-tag v-if="form.status==='PENDING'" type="warning">待处理</el-tag>
              <el-tag v-else-if="form.status==='ASSIGNED'" type="warning">已派单</el-tag>
              <el-tag v-else-if="form.status==='REJECTED'" type="primary">拒接单</el-tag>
              <el-tag v-else-if="form.status==='WAITING_FOR_BID'" type="warning">待抢单</el-tag>
              <el-tag v-else-if="form.status==='BID_ACCEPTED'">已抢单</el-tag>
              <el-tag v-else-if="form.status==='ACCEPTED'">已接单</el-tag>
              <el-tag v-else-if="form.status==='IN_SERVICE'" type="warning">服务中</el-tag>
              <el-tag v-else-if="form.status==='AWAITING_PAYMENT'" type="danger">待支付</el-tag>
              <el-tag v-else-if="form.status==='COMPLETED'" type="success">已完成</el-tag>
              <el-tag v-else-if="form.status==='RATED'" type="success">已评价</el-tag>
              <el-tag v-else-if="form.status==='CANCELED'" type="info">已取消</el-tag>
            </el-form-item>
          </el-col>
          <hr>
          <h3 v-if="form.workerId != null">接单信息</h3>
          <el-row v-if="form.workerId != null">
            <el-col :span="12">
              <el-form-item label="师傅姓名：">{{ form.workerNickName }} </el-form-item>
              <el-form-item label="师傅手机号：">{{ form.workerPhone }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接单时间：">{{ form.takeTime }} </el-form-item>
            </el-col>
          </el-row>
          <hr v-if="form.workerId != null">
          <h3 v-if="form.workerId != null">施工信息</h3>
          <el-row v-if="form.workerId != null">
            <el-col :span="12">
              <el-form-item label="服务时间：">{{ form.serviceTime }} </el-form-item>
              <el-form-item label="施工前时间：">{{ form.workPreTime }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工费用：">{{ form.orderPrice }} </el-form-item>
              <el-form-item label="施工前图片：">
                <img :src="form.workPrePhotoUrl ? form.workPrePhotoUrl: defaultAvatar" width="80px" height="80px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工后时间：">{{ form.workAfterTime }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施工后图片：">
                <img :src="form.workAfterPhotoUrl ? form.workAfterPhotoUrl: defaultAvatar" width="80px" height="80px" />
              </el-form-item>
            </el-col>
          </el-row>

          <hr v-if="form.payId != null">
          <h3 v-if="form.payId != null">支付信息</h3>
          <el-row v-if="form.payId != null">
            <el-col :span="12">
              <el-form-item label="支付时间："> {{ form.workPreTime }} </el-form-item>
              <el-form-item label="支付金额："> {{ form.orderPrice }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付ID："> {{form.payId}}</el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-form>

      <el-form  ref="form" :model="form" label-width="100px" size="mini" v-if="form.status != 'CANCELED'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户手机号：">{{ form.userTelephone }} </el-form-item>
            <el-form-item label="用户姓名：">{{ form.userNickName }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间：">{{ form.reserveTime }} </el-form-item>
            <el-form-item label="创建时间：">{{form.createTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：">{{ form.notes }} </el-form-item>
            <el-form-item label="上门地址：">{{ form.orderAddress}} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单编号：">{{ form.orderNum }} </el-form-item>
            <el-form-item label="订单状态：">
              <el-tag v-if="form.status==='PENDING'" type="warning">待处理</el-tag>
              <el-tag v-else-if="form.status==='ASSIGNED'" type="warning">已派单</el-tag>
              <el-tag v-else-if="form.status==='REJECTED'" type="primary">拒接单</el-tag>
              <el-tag v-else-if="form.status==='WAITING_FOR_BID'" type="warning">待抢单</el-tag>
              <el-tag v-else-if="form.status==='BID_ACCEPTED'">已抢单</el-tag>
              <el-tag v-else-if="form.status==='ACCEPTED'">已接单</el-tag>
              <el-tag v-else-if="form.status==='IN_SERVICE'" type="warning">服务中</el-tag>
              <el-tag v-else-if="form.status==='AWAITING_PAYMENT'" type="danger">待支付</el-tag>
              <el-tag v-else-if="form.status==='COMPLETED'" type="success">已完成</el-tag>
              <el-tag v-else-if="form.status==='RATED'" type="success">已评价</el-tag>
              <el-tag v-else-if="form.status==='CANCELED'" type="info">已取消</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form  ref="form" :model="form" label-width="100px" size="mini" v-if="form.status=='ASSIGNED'||
       form.status=='BID_ACCEPTED'||
       form.status=='ACCEPTED'||
      form.status=='IN_SERVICE'||
      form.status=='COMPLETED'||
      form.status=='RATED'||
      form.status=='AWAITING_PAYMENT'">
        <h3>接单信息</h3>
        <hr/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="师傅姓名：">{{ form.workerNickName }} </el-form-item>
            <el-form-item label="师傅手机号：">{{ form.workerPhone }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接单时间：">{{ form.takeTime }} </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <el-form  ref="form" :model="form" label-width="100px" size="mini" v-if="
      form.status=='ACCEPTED'||
      form.status=='COMPLETED'||
      form.status=='RATED'||
      form.status=='AWAITING_PAYMENT'">
      <h3>施工信息</h3>
      <hr/>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务时间：">{{ form.serviceTime }} </el-form-item>
          <el-form-item label="施工前时间：">{{ form.workPreTime }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工费用：">{{ form.orderPrice }} </el-form-item>
          <el-form-item label="施工前图片：">
            <img :src="form.workPrePhotoUrl ? form.workPrePhotoUrl: defaultAvatar" width="80px" height="80px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工后时间：">{{ form.workAfterTime }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工后图片：">
            <img :src="form.workAfterPhotoUrl ? form.workAfterPhotoUrl: defaultAvatar" width="80px" height="80px" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <el-form  ref="form" :model="form" label-width="100px" size="mini" v-if="
      form.status=='COMPLETED'||
        form.status=='RATED'">
        <h3>支付信息</h3>
        <hr/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付时间：">{{ form.workPreTime }} </el-form-item>
            <el-form-item label="支付金额：">{{ form.orderPrice }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付ID：">{{form.payId}}</el-form-item>
            <el-form-item label="完成时间：">{{form.completionTime}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form  ref="form" :model="form" label-width="100px" size="mini" v-if="
        form.status=='RATED'">
        <h3>评价信息</h3>
        <hr/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="评价id">{{ form.commentId }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价内容：">{{form.questionDescription}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">关 闭</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
// import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
import {loadWorker} from "@/api/worker/worker";
import {listOrder} from "@/api/user/user";
import {addGrabPool, assignOrder} from "@/api/order/order";
import Vue from "vue";


Vue.prototype.$currentOrderNum = '这是一个全局变量';

export default {
  name: "Post",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //默认照片
      defaultAvatar: require('@/assets/images/defaultAvatar.png') ,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      message: "",
      // 是否显示弹出层
      open: false, //查看详情
      open1: false, //派单表
      // 查询参数
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        workerId: undefined,
        status: undefined,
        reserveTimeStart: undefined,
        telephone: undefined,
        userId: undefined,
        serviceCategoryName: undefined,
        orderNum: undefined,
        orderStatus: undefined,
      },
      workers: [],
      orders: [],
      // 表单参数
      form: {},
      form1: {},
      // 表单校验
      rules: {
        postName: [
          { required: true, message: "岗位名称不能为空", trigger: "blur" }
        ],
        postCode: [
          { required: true, message: "岗位编码不能为空", trigger: "blur" }
        ],
        postSort: [
          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
        ]
      },

    };
  },
  computed: {
    workerId() {
      return this.$route.query.workerId;
    },
    userId() {
      return this.$route.query.userId;
    }
  },
  created() {
      this.getOrder();
  },
  methods: {
    /** 查询订单列表 */
    getOrder() {
      const workerId = this.workerId;
      const userId = this.userId;
      if (workerId != undefined) {
        this.queryParams.workerId = workerId;
      }
      if (userId != undefined) {
        this.queryParams.userId = userId;
      }
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        console.log(11111)
        console.log(response.data)
        this.orders = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询师傅列表 */
    getWorker() {
      this.loading = true;
      let param = {
        currentPage: 1,
        pageSize: 10,
        authenticationStatus: 1
      };
      loadWorker(param).then(response => {
        console.log(response.data.rows)
        this.workers = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    /** 入抢单池 */
    aGrabPool(row){
      console.log(row)
      const orderNum = {
        orderNum: row.orderNum
      };
      console.log(orderNum)
      this.$modal.confirm('是否确认入抢单池编号为"' + orderNum.orderNum + '"的订单？').then(function() {
        return addGrabPool(orderNum)
      }).then(() => {
        this.getOrder();
        this.$modal.msgSuccess("入抢单池成功");
      }).catch(() => {});
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        // orderNum: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getOrder();
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log("重置")
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 详细按钮操作 */
    details(row) {
      console.log(row)
      this.open = true;
      this.form = row;
    },
    /** 显示派单表派单 */
    handleUpdate(row) {
      this.$currentOrderNum = row.orderNum
      console.log(row.orderNum)
      this.open1 = true;
      this.form1 = row;
      this.getWorker();
    },
    /** 派单按钮操作 */
    aOrder(row) {
      const param = {
        orderNum: this.$currentOrderNum,
        workerId: row.id
      };
      this.$modal.confirm(`是否确认派单编号为"${this.$currentOrderNum}"的订单？`).then(async () => {
        try {
          await assignOrder(param);
          this.open1 = false;
          this.getOrder();
          this.$modal.msgSuccess("派单成功");
        } catch (error) {
          this.open1 = false;
          this.getOrder();
          console.error('派单失败:', error);
          this.$modal.msgError("派单失败，请检查网络连接或联系管理员");
        }
      }).catch(() => {
        this.$modal.msgError("取消派单");
      });
    }
  },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.postId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.message = "添加信息";
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/post/export', {
        ...this.queryParams
      }, `post_${new Date().getTime()}.xlsx`)
    }
};
</script>
